<template>
    <div class="RowPage3">
        <div v-if="backlog">
            <card-item :data="cardData1" :flex="10" :min_width="1108">
                <div class="functionBox">
                    <div>
                        <img src="../../../assets/dashboard/function1.png" alt="">
                        <p>快递作业</p>
                    </div>
                    <div>
                        <img src="../../../assets/dashboard/function2.png" alt="">
                        <p>运输任务</p>
                    </div>
                    <div>
                        <img src="../../../assets/dashboard/function3.png" alt="">
                        <p>线路管理</p>
                    </div>
                    <div>
                        <img src="../../../assets/dashboard/function4.png" alt="">
                        <p>车辆管理</p>
                    </div>
                    <div>
                        <img src="../../../assets/dashboard/function5.png" alt="">
                        <p>司机管理</p>
                    </div>
                    <div>
                        <img src="../../../assets/dashboard/function6.png" alt="">
                        <p>运费查询</p>
                    </div>
                </div>
            </card-item>
        </div>

        <el-skeleton v-else animated style="width: 100%">
            <template slot="template">
                <el-skeleton-item
                    style="width: 100%; height: 203px; margin: 12px"
                />
            </template>
        </el-skeleton>
    </div>
</template>

<script>
export default {
    name: 'RowPage3',
    props: {
        backlog: true
    },
    data () {
        return {
            cardData1: {
                title: '常用功能',
            }
        }
    },
    methods: {}
}
</script>

<style scoped lang="scss">
::-webkit-scrollbar {
    display: none;
}

.RowPage3 {
    > div {
        width: 100%;
        display: flex;
        justify-content: space-between;
        overflow: auto;

        .functionBox {
            display: flex;
            justify-content: space-between;

            > div {
                background-color: #FAFAFB;
                width: 15%;
                height: 120px;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all 0.1s;

                img {
                    width: 40px;
                    margin-bottom: 12px;
                }
                
                p {
                    font-size: 16px;
                    font-weight: bold;
                }

                &:hover {
                    color: #E15536;
                }
            }
        }
    }
}
</style>
